<!--
 * @Author: your name
 * @Date: 2021-09-16 00:17:51
 * @LastEditTime: 2021-09-20 12:15:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \more-money\src\views\labels.vue
-->
<template>
    <div class="tags-container">
        <Layout>
            <div class="tags-title flex flex-center">
                <Icon iconName="piggybank" />
                <span class="name FZJCXS">萌豚记账</span>
            </div>
            <div class="tags-content">
                <div class="tags-list">
                    <div class="tags-item flex flex-justify-between" v-for="(item,index) in tagsList" :key="index"
                    @click="operation('detail')">
                        <div class="left-side">
                            <Icon @click.native="operation('delete',item)" iconName="minus-circle" />
                            <span class="fs-14 tags-value">{{item.name}}</span>
                        </div>
                        <div class="right-side">
                            <Icon iconName="drag-column" />
                        </div>
                    </div>
                </div>

                <div class="tag-add" @click="operation('create')">
                    <Icon iconName="add" />
                    新增标签
                </div>
            </div>
        </Layout>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import TagsListModel from '@/models/TagsListModel';

@Component
export default class Labels extends Vue{
    private tagsList: Tag[] = [];
    created(){
        this.tagsList = TagsListModel.getList();
    }
    private operation(type: string,item?: Tag){
        switch(type){
            case 'create':{
                const newTagName = window.prompt('请输入新标签');
                newTagName ? TagsListModel.create({name:newTagName,value:'default'}) : window.alert('标签名不可为空');
                break;
            }
            case 'delete':
                item && TagsListModel.delete(item) === 'success' ? TagsListModel.getList() : window.alert('删除失败');
                break;
            default:
                break;
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/config.scss';
 
.tags-title{
    padding: 10px 0;
    color: #333333;
    border-bottom: 1px solid rgba(153, 153, 153, 0.3);
    background-color: $color-primary;
    position: relative;

 ::v-deep .icon{
     width: 2.2rem;
     height: 2.2rem;
     transform: translateX(-100%);
 }

 .name{
     font-size: 50px;
     position: absolute;
     top: -30%;
     right: 44%;
     transform: translateX(50%);
 }
}
.tags-content{
    height: calc(100% - 60px);
    position: relative;
    .tags-list{
        .tags-item{
            padding: 10px 20px;
            border-bottom: 1px solid #E2E4EE;
            box-shadow: inset 0 -3px 5px -5px rgba(192, 192, 192, 0.3);
            .tags-value{
                margin-left: 8px;
            }
        }
    }
    .tag-add{
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 16px;
        background: #f4f4f4;
        cursor: pointer;
        box-shadow: inset 0 0 3px rgba(213, 213, 213, 0.3);
    }
}
</style>